import * as echarts from 'echarts';

// ECharts Option
const setChartOption = () => {
  // mock数据
  const dataArr = {
    xdata: ["2022", "2023", "2024"],
    vaccination: [215.03, 227.09, 206.66],
    unvaccinated: [198.50, 186.44, 169.66],
    unvaccinatedTwo: [57.92, 52.30, 47.59,],
  };

  // tooltip
  const tooltip = {
    trigger: "axis",
    textStyle: { fontSize: "100%" },
    formatter: (params) => {
      let rander = params
        .map((item) =>
          item.seriesType !== "pictorialBar"
            ? `<div>${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value + " 万方"
            }</div>`
            : ""
        )
        .join("");
      return `
            <div>${params[0].axisValue}</div>
            ${rander}
          `;
    },
  };
  const legend = {
    data: ["需水量", "灌溉量", "排水量"],
    textStyle: { fontSize: 13, color: "#fff" },
    itemWidth: 16,
    itemHeight: 10,
    itemGap: 10,
    top: "5%",
    selectedMode: false,
  };
  const grid = { top: "16%", left: "10%", right: "5%", bottom: "8%" };
  // xAxis
  const xAxis = {
    boundaryGap: false,
    axisTick: { show: true },
    axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
    axisLabel: { textStyle: { fontSize: 13, color: "#fff" } },
    data: dataArr.xdata,
  };

  // yAxis
  const yAxis = [
    {
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { lineStyle: { type: 'dashed', color: "rgba(6, 183, 253, 0.2)" } },
      axisLabel: { textStyle: { fontSize: 13, color: "#fff" } },
    },
    {
      show: true,
      max: 100,
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        textStyle: { fontSize: 14, color: "#fff" },
        formatter: (params) => {
          return `${params}%`;
        },
      },
    },
  ];

  // series
  const series = [
    {
      z: 1,
      type: "line",
      name: "需水量",
      data: dataArr.vaccination,
      symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
      symbolSize: [6, 6],
      color: {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [
          { offset: 0, color: "rgba(29, 245, 160, .7)" },
          { offset: 1, color: "rgba(29, 245, 160, .3)" },
        ],
        global: false, // 缺省为 false
      },
      lineStyle: {
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          // 0% 处的颜色                           // 100% 处的颜色
          colorStops: [
            { offset: 0, color: "rgba(29, 245, 160, .7)" },
            { offset: 1, color: "rgba(29, 245, 160, .3)" },
          ],
          global: false, // 缺省为 false
        },
      },
      // 修改的是线下区域的颜色
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          // 右/下/左/上
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: "rgba(29, 245, 160, .1)" },
            { offset: 1, color: "transparent" },
          ]
        ),
      },
    },
    {
      z: 2,
      type: "line",
      name: "灌溉量",
      data: dataArr.unvaccinated,
      symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
      symbolSize: [6, 6],
      color: {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [
          { offset: 0, color: "rgba(50, 255, 238, .7)" },
          { offset: 1, color: "rgba(50, 255, 238, .3)" },
        ],
        global: false, // 缺省为 false
      },
      lineStyle: {
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          // 0% 处的颜色                           // 100% 处的颜色
          colorStops: [
            { offset: 0, color: "rgba(50, 255, 238, .7)" },
            { offset: 1, color: "rgba(50, 255, 238, .3)" },
          ],
          global: false, // 缺省为 false
        },
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          // 右/下/左/上
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: "rgba(50, 255, 238, .1)" },
            { offset: 1, color: "transparent" },
          ]
        ),
      },
    },
    {
      z: 3,
      type: "line",
      name: "排水量",
      data: dataArr.unvaccinatedTwo,
      symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
      symbolSize: [6, 6],
      color: {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [
          { offset: 0, color: "rgba(255, 209, 26, .7)" },
          { offset: 1, color: "rgba(255, 209, 26, .3)" },
        ],
        global: false, // 缺省为 false
      },
      lineStyle: {
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          // 0% 处的颜色                           // 100% 处的颜色
          colorStops: [
            { offset: 0, color: "rgba(255, 209, 26, .7)" },
            { offset: 1, color: "rgba(255, 209, 26, .3)" },
          ],
          global: false, // 缺省为 false
        },
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          // 右/下/左/上
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: "rgba(255, 209, 26, .1)" },
            { offset: 1, color: "transparent" },
          ]
        ),
      },
    },
  ];
  const chartOption = {
    tooltip,
    xAxis,
    yAxis,
    series,
    grid,
    legend,
  };

  return chartOption;
};
export default setChartOption;
